<template>
  <div class="m-page" v-if="!(pageSum<=1)">
    <!-- 索引为4时   1-6显示 ...  120 -->
    <!-- 索引为5时   1 ... 3-7  120 -->
    <a :class="(curPageIdx >=2)? 'pagea' : 'pagespan'" @click="dirClick(1,'dir-left')">
      <i class="iconfont icon-jiantouzuo"></i>
    </a>
    <a
      :class="curPageIdx === 1 ? 'pagea active' : 'pagea'"
      href="javascript:void(0);"
      @click="dirClick(1)"
    >1</a>

    <template v-if="(curPageIdx >= 5 && pageSum>7)">
      <span>...</span>
    </template>
    <template v-for="count of ((pageSum<7)? pageSum-2 : 5) " :key="count">
      <a
        :class="curPageIdx === (DrawIdx+count) ? 'pagea active' : 'pagea'"
        href="javascript:void(0);"
        @click="dirClick(DrawIdx+count)"
      >{{DrawIdx+count}}</a>
    </template>

    <template v-if="(curPageIdx < pageSum-3 && pageSum>7)">
      <span>...</span>
    </template>
    <a
      :class=" (curPageIdx >= pageSum)? 'pagea active' : 'pagea'"
      href="javascript:void(0);"
      @click="dirClick(pageSum)"
    >{{pageSum}}</a>
    <a :class="(curPageIdx < pageSum) ? 'pagea' : 'pagespan'" @click="dirClick(1,'dir-right')">
      <i class="iconfont icon-jiantouyou"></i>
    </a>
  </div>
</template>

<script>
import {watch,reactive,toRefs} from 'vue'
export default {
    name:"MPage",
    props: {
        pageSum:{
            type:Number,default:1
        },
        curPageIdx:{
            type:Number,default:1
        }
    },
    emits:["dirClick"],
    setup(props,{emit}){
        const state = reactive({
            currentIndex:props.curPageIdx,
            DrawIdx:1,
        })
        watch(()=>props.curPageIdx,()=>{
            state.currentIndex=props.curPageIdx;
        })
        watch(()=>props.pageSum,()=>{
            state.DrawIdx=1;
        })

        const dirClick = (index,dir) => {
            if(dir){
                dirlr(index,dir);
            }else{
                state.currentIndex = index;
            }
            drawDirIdx();
            emit("dirClick",state.currentIndex);
        }

        const drawDirIdx = () =>{
            if(state.currentIndex - 3 <= 1){
                state.DrawIdx = 1;
            }else  if(state.currentIndex >= props.pageSum-3 && props.pageSum>=7){
                state.DrawIdx = props.pageSum-6;
            } else if(props.pageSum >=7){
                state.DrawIdx = state.currentIndex -3;
            }
        }

        const dirlr = (index,dir)=>{
            if(dir==='dir-left'){
                state.currentIndex <= 1 ? state.currentIndex = 1:state.currentIndex -= index;
            }else if(dir==='dir-right'){
                state.currentIndex >= props.pageSum ?  state.currentIndex = props.pageSum :state.currentIndex +=index;
            }
        }

        return{
            ...toRefs(state),
            dirClick
        }
    }
}

</script>

<style lang='scss' scoped>
.m-page {
  width: 100%;
  padding: 15px 0;
  margin: 0 auto;
  text-align: center;
  .pagea {
    display: inline-block;
    width: 44px;
    height: 44px;
    margin: 0 0.6em;
    line-height: 44px;
    font-size: 14px;
    border-radius: 50%;
    color: #666;
    user-select: none;
    cursor: pointer;

    &.active {
      background-color: $ThemeColor;
      color: #fff;
    }
    &:hover {
      background-color: $ThemeColor;
      color: #fff;
    }
  }
  span {
    user-select: none;
  }
  .pagespan {
    display: inline-block;
    width: 44px;
    height: 44px;
    margin: 0 0.6em;
    line-height: 44px;
    font-size: 14px;
    border-radius: 50%;
    user-select: none;
    color: #ccc;
  }
}
</style>
